<template>
  <view class="goods-list-container" scroll-y>
    <view
      class="goods-item"
      v-for="(goods, index) in goodsList"
      :key="index"
      @click="toGoodsDetail(goods)"
    >
      <image class="goods-img" :src="goods.img" mode="" />
      <view class="info-cont">
        <view class="info">
          <view class="name">{{ goods.name }}</view>
          <view class="price">￥{{ goods.price }}</view>
        </view>
        <view class="cart-icon">
          <image src="../static/images/cart.png" mode="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'goods-list',
  props: {
    goodsList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  methods: {
    // 跳转商品相详情页
    toGoodsDetail(goods) {
      // 将商品存储到本地，不需要重新发请求拿数据
      uni.setStorage({
        key: 'goods',
        data: goods,
        success: function () {
          uni.navigateTo({
            url: '/pages/goods-detail/goods-detail',
          })
        },
      })
    },
  },
}
</script>

<style lang="scss">
.goods-list-container {
  height: calc(100vh - 352rpx);
  padding: 16rpx;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  box-sizing: border-box;
  .goods-item {
    width: 49%;
    .goods-img {
      width: 100%;
      height: 350rpx;
    }
    .info-cont {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .name {
        width: 100%;
        height: 28rpx;
        margin: 20rpx 0;
        line-height: 28rpx;
        font-size: $lxins-fs-14;
        overflow: hidden;
        white-space: normal;
        text-overflow: ellipsis;
      }
      .price {
        font-size: $lxins-fs-12;
        line-height: 40rpx;
      }
    }
    .cart-icon image {
      width: 60rpx;
      height: 60rpx;
      margin-right: 14rpx;
    }
  }
}
</style>
